<script setup>
import { ref, onMounted } from 'vue'
import { formatColumn } from '@/utils/tools.js'
import { useCorePage } from '@/composables/open-link.js'

import {
  subTaskOtherDTOColumns,
  subTaskCIDTOColumns,
  subTaskPEDTOColumns,
  subTaskPRDTOColumns
} from '@/views/home/component/home.data.js'
import { querySubTask } from '@/api/home'
const props = defineProps({
  claimNo: {
    type: [String, Number],
    required: ''
  }
})
const subTaskStatusOpen = defineModel('subTaskStatusOpen')

let loading = ref(false)

// 理赔子任务
const subTaskPEDTOSource = ref([])
const subTaskCIDTOSource = ref([])
const subTaskPRDTOSource = ref([])
const subTaskOtherDTOSource = ref([])
async function getSubTaskData() {
  let res = null
  loading.value = true
  try {
    const data = { claimNumber: props.claimNo }
    res = await querySubTask(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
  if (res?.isSuccess) {
    subTaskPEDTOSource.value = res.data.subTaskPEDTO
    subTaskCIDTOSource.value = res.data.subTaskCIDTO
    subTaskPRDTOSource.value = res.data.subTaskPRDTO
    subTaskOtherDTOSource.value = res.data.subTaskOtherDTO
  }
}
onMounted(() => {
  getSubTaskData()
})
</script>
<template>
  <a-drawer
    v-model:open="subTaskStatusOpen"
    class="claim-sub-task-info-drawer"
    root-class-name="root-class-name"
    title="子任务状态"
    width="70%"
    placement="right"
    :maskClosable="false"
  >
    <div class="claimNo">理赔号：{{ claimNo }}</div>
    <div class="table-item" v-if="subTaskPEDTOSource.length">
      <div class="table-item-title">PE调查</div>
      <a-table
        class="ant-table-sub-striped"
        :columns="subTaskPEDTOColumns"
        :data-source="subTaskPEDTOSource"
        :pagination="false"
      />
    </div>
    <div class="table-item" v-if="subTaskCIDTOSource.length">
      <div class="table-item-title">医学调查</div>
      <a-table
        class="ant-table-sub-striped"
        :columns="subTaskCIDTOColumns"
        :data-source="subTaskCIDTOSource"
        :pagination="false"
      />
    </div>
    <div class="table-item" v-if="subTaskPRDTOSource.length">
      <div class="table-item-title">预授权</div>
      <a-table
        class="ant-table-sub-striped"
        :columns="subTaskPRDTOColumns"
        :data-source="subTaskPRDTOSource"
        :pagination="false"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'preAuthNo'">
            <span
              class="text-decortion cursor-pointer"
              @click="
                useCorePage({
                  preAuthNumber: record.preAuthNo,
                  type: 'preAuth'
                })
              "
              >{{ text }}</span
            >
          </template>
          <template v-if="column.key === 'conclusion'">
            <span>{{ formatColumn(text) }}</span>
            <div class="describe" v-if="text && (record.medicalRemark || record.gopRemark)">
              <a-popover
                class="popover"
                trigger="click"
                widht="500px"
                color="rgba(0, 0, 0, 0.85)"
                :autoAdjustOverflow="true"
                :getPopupContainer="getPopupContainers"
              >
                <template #content>
                  <div class="popover-content tootip">
                    <div v-if="record.medicalRemark">
                      医疗评估：{{ formatColumn(record.medicalRemark) }}
                    </div>
                    <div v-if="record.gopRemark">
                      担保函备注：{{ formatColumn(record.gopRemark) }}
                    </div>
                  </div>
                </template>
                <svg-icon
                  class="question cursor-pointer"
                  size="14"
                  inert
                  name="home-query"
                  v-if="text"
                />
              </a-popover>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <div class="table-item" v-if="subTaskOtherDTOSource.length">
      <div class="table-item-title">其他子任务</div>
      <a-table
        class="ant-table-sub-striped"
        :columns="subTaskOtherDTOColumns"
        :data-source="subTaskOtherDTOSource"
        :pagination="false"
      />
    </div>
  </a-drawer>
</template>
<style lang="scss">
.claim-sub-task-info-drawer {
  .ant-table-cell {
    word-break: break-all;
  }
  .ant-popover {
    top: -140px !important;
    .popover-content {
      width: 500px;
      white-space: wrap;
    }
  }
  .ant-drawer-close {
    position: absolute;
    right: 10px;
  }
  .claimNo {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 14px;
    color: $color-text-primary;
    margin-bottom: 21px;
  }

  .table-item-title {
    height: 14px;
    border-left: 3px solid #4d789c;
    padding-left: 9px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 14px;
    color: $color-text-primary;
    margin-bottom: 14px;
    margin-top: 31px;
  }
  .text-decortion {
    font-weight: 400;
    font-size: 14px;
    color: #4d789c;
    text-decoration: underline;
  }
  .text-decortion:hover {
    color: #97b7c5;
  }
  .describe {
    display: inline-block;
    position: relative;
  }

  .question {
    margin-left: 7px;
    position: absolute;
    bottom: -2px;
    color: #999;
  }
}
</style>
